<template>
	<!-- 顶部导航栏 -->
	<!-- <view class="nav-bar">
		<uni-icons type="back" size="28" @click="goBack"></uni-icons>
		<view class="title-container">
			<text class="title1">全部订单</text>
			<uni-icons type="down" size="28" @click="showOrderStatusList"></uni-icons>
		</view>
		<uni-icons type="filter" size="28" @click="showFilter"></uni-icons>
	</view> -->
	<!-- 订单时间筛选栏 -->
	<view class="tab-bar">
		<view class="tab-item" :class="{ active: currentTab === 'today' }" @click="changeTab('today')">
			今日
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'thisMonth' }" @click="changeTab('thisMonth')">
			本月
		</view>
		<view class="tab-item" :class="{ active: currentTab === 'custom' }" @click="changeTab('custom')">
			自定义
		</view>
	</view>
	<view class="container">
		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-list">
			<view class="order-item" v-for="(order, index) in orders" :key="index">
				<view class="header">
					<view class="order-number">
						<text>{{ index + 1 }}</text>
					</view>
					<view class="right">
						<view class="order-time">
							<text>2025-01-10 00:18:59 前送达</text>
						</view>
						<view class="store-info">
							<uni-icons type="shop"></uni-icons>
							<text>沂小蒙·炒鸡(利民东路店)</text>
						</view>
					</view>
					<view class="order-status">
						<text>订单完成</text>
					</view>
				</view>
				<view class="content">
					<view class="customer-info">
						<text class="text">测试</text>
						<view class="center">
							<text class="text">15393576763</text>
							<view class="icon-container">
								<uni-icons type="phone" size="20" color="#4a71ff"></uni-icons>
							</view>
							<view class="icon-container">
								<uni-icons type="location" size="20" color="#4a71ff"></uni-icons>
							</view>
						</view>
						<text style="margin-top: 5rpx;">山东省济南市槐荫区段店镇青岛路3716号29003</text>
					</view>
					<view class="order-detail">
						<view style="display: flex;align-items: center;">
							<text style="font-size: 29rpx;">订单号:631805692190917</text>
							<button type="default" size="mini" plain>复制</button>
						</view>
						<view class="info-item">
							<text class="product-count">1件商品</text>
							<text class="product-price">实收 100元</text>
						</view>
						<view style="font-size: 29rpx;color: #333;margin-top: 10rpx;">测试商品</view>
					</view>
					<view class="order-note">
						<text>备注: 测试</text>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 订单状态列表弹窗 -->
		<view class="order-status-modal" v-if="showOrderStatusModal">
			<view class="modal-header">
				<text>状态列表</text>
				<uni-icons type="close" size="28" @click="hideOrderStatusModal"></uni-icons>
			</view>
			<view class="modal-content">
				<view class="status-item" v-for="(status, index) in orderStatusList" :key="index">
					<text>{{ status }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 'today',
				showOrderStatusModal: false,
				orderStatusList: ['新订单', '待接单', '取货中', '异常单', '退款单', '已完成', '已取消'],
				orders: [{
					id: 1,
					time: '2025-01-10 00:18:59 前送达',
					store: '沂小蒙·炒鸡(利民东路店)',
					customer: '测试',
					phone: '15393576763',
					address: '山东省济南市槐荫区段店镇青岛路3716号29003',
					orderNumber: '631805692190917',
					items: '1件商品 实收100元',
					product: '测试商品',
					note: '备注: 测试',
					status: '订单完成'
				}]
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			showOrderStatusList() {
				this.showOrderStatusModal = true;
			},
			hideOrderStatusModal() {
				this.showOrderStatusModal = false;
			},
			changeTab(tab) {
				this.currentTab = tab;
			},
			showFilter() {

			}
		}
	};
</script>

<style lang="scss">
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;

		.uni-icons {
			color: #333;
		}

		.title-container {
			display: flex;
			align-items: center;

			.title1 {
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}

	.tab-bar {
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: static;
		top: 0;

		.tab-item {
			width: 100rpx;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;

			&.active {
				color: #3399ff;
				border-bottom: 6rpx solid #3399ff;
			}
		}
	}

	.container {
		background-color: #f5f5f5;
		height: 100vh;

		.order-list {
			padding-top: 20rpx;

			.order-item {
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
				margin-bottom: 20rpx;
				padding: 20rpx;

				.header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 0 0 20rpx;
					background: #f5f5f5;

					.right {
						display: flex;
						flex-direction: column;

						.order-time {
							font-weight: bold;
							font-size: 29rpx;
							color: #3399ff;
						}

						.store-info {
							font-size: 24rpx;
							color: #666666;
							display: flex;
							align-items: center;
						}
					}

					.order-number {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #e4e4eb;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;
						margin-right: 30rpx;
					}

					.order-status {
						width: 158rpx;
						height: 154rpx;
						background: rgba(82, 96, 255, 0.14);
						border-radius: 76rpx 9rpx 9rpx 76rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-weight: bold;
						font-size: 29rpx;
						color: #4c6eff;
					}
				}

				.content {
					margin-top: 20rpx;

					.customer-info {
						font-size: 24rpx;
						color: #666;
						margin-top: 10rpx;

						.text {
							font-size: 29rpx;
							color: #333333;
							font-weight: bold;
						}

						.center {
							display: flex;
							align-items: center;

							.icon-container {
								width: 50rpx;
								height: 50rpx;
								border-radius: 50%;
								background-color: #e4e4eb;
								display: flex;
								justify-content: center;
								align-items: center;
								margin-left: 20rpx;
							}

						}

					}

					.order-detail {
						font-size: 24rpx;
						color: #666;
						margin-top: 10rpx;

						button {
							margin-left: 10rpx;
						}

						.info-item {
							display: flex;
							align-items: center;
							font-size: 29rpx;
							color: #333333;
							margin-bottom: 10rpx;

							.product-count {
								font-weight: bold;
							}

							.product-price {
								color: red;
								margin-left: 10rpx;
							}
						}
					}

					.order-note {
						font-size: 24rpx;
						color: #999;
						padding: 16rpx 14rpx;
						margin-bottom: 20rpx;
						background-color: #f5f5f5;
						margin-top: 10rpx;
					}
				}

				.footer {
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;

					button {
						flex: 1;
						margin-right: 10rpx;

						&:last-child {
							margin-right: 0;
						}
					}
				}
			}
		}

		.order-status-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.3);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 90%;
				background-color: #fff;
				border-radius: 10rpx 10rpx 0 0;
				padding: 20rpx;

				text {
					font-size: 32rpx;
					font-weight: bold;
				}

				uni-icons {
					color: #999;
				}
			}

			.modal-content {
				width: 90%;
				background-color: #fff;
				border-radius: 0 0 10rpx 10rpx;
				padding: 20rpx;

				.status-item {
					font-size: 28rpx;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}
</style>